<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生课题管理</el-breadcrumb-item>
      <el-breadcrumb-item>选择指导学生</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h1>请从左侧选择指导的学生，并加入右侧。点击提交则确认指导学生名单</h1>
      <div class="edit_dev">
        <!-- <el-transfer
          filterable 
          filter-placeholder="请输入城市拼音"
          v-model="value"
          :data="data">
        </el-transfer> -->
        <el-transfer filterable v-model="checked" :data="transferData">
          <span slot-scope="{ option }">{{ option.label }}
            <span style="float: right; color: #8492a6; font-size: 13px; padding-left: 10px;padding-right: 15px;">{{ option.tabname }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px; padding-left: 10px;">{{ option.comment }}</span>
          </span>
        </el-transfer>
      </div> 
      <el-button round type="success" @click.native="submitStudentList">确认添加指导学生名单</el-button>
    </el-card>
  </div>

</template>

<script>
  import {getNoTeaIdStudentList} from '../../axios/student'
  import {addGuideStudentList} from '../../axios/teacher'
  export default {
    name: 'TeacherChooseStudent',
    data() {
      return {
        tableName: [], //数据表名
        transferData: [], //Transfer 的数据源	array[{ key, label, disabled }]
        checked: [], //穿梭框绑定的数据，选定到右侧框中的数据项的value组成的数组
      }
    },
    created(){
      this.getData()
    },
    methods: {
      //根据数据表名，从后台获取各个表的所有字段的相关信息
      getData() {
        getNoTeaIdStudentList().then(res => {
          if(res.success) {
            const allData = res.data 
            const data = [];
            for(let i = 0; i < allData.length; i++) {
              data.push({
                key: allData[i].id,
                label: `${allData[i].name} (${allData[i].id})` 
              });
            }
            this.transferData = data;
          } 
        }).catch(error => {
          this.$message.error(error)
        })
      }, 
      //右侧列表元素变化时触发
      submitStudentList() {
        if(this.checked.length < 1){
          this.$message.error('请选择指导学生!')
          return 
        }
        this.$confirm('确认提交吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => { 
          // 此时发送后端请求，保存录入信息
          addGuideStudentList(this.checked).then(res => {
            if(res.success){
              this.$message.success('添加成功') 
              this.$router.push('/teacher/students') // 挂载查看指导学生组件
            }
         })   
        }).catch(() => {  
          this.$message.info('已取消提交!');   
        }) 
      },
    },

  }
</script>

<style scoped>
  .el-button {
    margin: 10px 40%;
  }
  .el-card h1{
    margin: 10px 22%;
    height: 50px;
  }
  .edit_dev { 
    margin: 0px 5%
  }
  .edit_dev .el-transfer{
    height: 550px;
  }
   .edit_dev >>> .el-transfer-panel {
     width:400px;
     min-height: 500px;
   }
   .edit_dev >>> .el-checkbox-group {
     height: 500px;
   }
</style>